---
id: 616965351e74d4689eb6de30
title: 步驟 5
challengeType: 0
dashedName: step-5
---

# --description--

你可以在一個網頁上有多個自閉合的 `meta` 元素。 每個 `meta` 元素都會添加無法通過其他 HTML 元素來表達的頁面信息。

在 `head` 中添加另一個自閉合的 `meta` 元素。 給它一個 `name` 屬性，值爲 `viewport`，和一個 `content` 屬性，值爲 `width=device-width, initial-scale=1.0`，這樣你的頁面在各種設備上看起來是一樣的。

# --hints--

你應該有兩個 `meta` 元素。

```js
const meta = document.querySelectorAll('meta');
assert(meta?.length === 2);
```

你的新 `meta` 元素應該是一個自閉合元素。

```js
assert(code.match(/<\/meta>/i) === null);
```

你的新 `meta` 元素應將 `name` 屬性設置爲 `viewport`，並將 `content` 屬性設置爲 `width=device-width, initial-scale=1.0`。

```js
const meta = [...document.querySelectorAll('meta')];
const reValidContent = /^\s*width\s*=\s*device-width\s*,\s*initial-scale\s*=\s*1(?:\.0)?\s*$/;
const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && reValidContent.test(m?.getAttribute('content')));
assert.exists(target);
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
--fcc-editable-region--
  <head>
    <meta charset="utf-8">
    <title>Colored Markers</title>
  </head>
--fcc-editable-region--
  <body>
  </body>
</html>
```
